Conversation
JenFi72
left a comment
JenFi72
left a comment
There was a problem hiding this comment.
Very good project Simon! The page looks good in different responsive "moods" and you have clearly reached all requirement in order to meet blue level requirements for this task:
- A list of all repos that are forked from Technigo
- Your username and profile picture
- Most recent update (push) for each repo
- Name of your default branch for each repo
- URL to the actual GitHub repo
- Number of commits for each repo
- It should be responsive (mobile first)
- A visualisation, for example through a pie chart, of how many projects you've done so far, compared to how many you will do (in total it will be 19 weekly projects
Concerning the code it is structured, easy to follow and clean. Very good job!
| const drawChart = (amount) => { | ||
| const configchart = { | ||
| type: 'doughnut', | ||
| data: { | ||
| labels: ['Complete', 'Not Complete'], | ||
| datasets: [ | ||
| { | ||
| label: 'Technigo projects rate ', | ||
| data: [amount, 19 - amount], | ||
| backgroundColor: ['#77E327', '#E33527'], | ||
| hoverOffset: 3, | ||
| }, | ||
| ], | ||
| }, | ||
| } | ||
| const myProjects = new Chart(ctx, configchart) | ||
| } |
| <script src="./chart.js"></script> | ||
| <script src="./script.js"></script> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
This is a rather short and easy-to follow HTML without unnecessary divs etc, though it would be nice to add comments to declare/describe different sections - like "//PROFILE SECTIONS", "PROJECT SECTION"
| } | ||
|
|
||
| //Prints out the user info in the HTML | ||
|
|
There was a problem hiding this comment.
Nice comments, makes it easy to follow.
| <div class="repoInfo" id="${projectID}"> | ||
| <img src="github.png" class="repoimg" alt="logo" width="25px" /> | ||
| <p class="cardInfo">Project name: | ||
| ${repo.name.replace('project-', '').replace('-', ' ')} |
There was a problem hiding this comment.
Neat code string, didn't think of this method myself :)
| } | ||
| // Function to get commits and print them out | ||
| const getCommits = (projects, projectID) => { | ||
| const GIT_COMMIT_API = projects.commits_url.replace('{/sha}', '') |
| } | ||
| @keyframes color-change { | ||
| 0% { | ||
| background-color: rgb(7, 41, 152); | ||
| } | ||
| 10% { | ||
| background-color: rgb(65, 32, 153); | ||
| } |
There was a problem hiding this comment.
Maybe add some comments here as well to make it easier t follow.
| @media (min-width: 668px) { | ||
| .repoInfo { | ||
| justify-items: center; | ||
| display: grid; | ||
| } | ||
|
|
||
| .personData { | ||
| justify-items: center; | ||
| display: grid; | ||
| } | ||
| .projects { | ||
| grid-template-columns: 1fr 1fr; | ||
| } | ||
| .cardInfo { | ||
| font-size: 16px; | ||
| padding: 5px; | ||
| } | ||
| } |
There was a problem hiding this comment.
Good that you are being thorough with mediaqueries.
2 participants
This was a heavy one :)